import React, { Component } from "react";
// import type { Node } from "react";

import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    Dimensions,
    StyleSheet,
    ImageBackground,
    Image,
    Text,
    useColorScheme,
    FlatList,
    View,
    Button,
    TextInput,
    Modal,
    TouchableHighlight,
    ToastAndroid,
} from "react-native";

import {
    Colors,
    DebugInstructions,
    Header,
    LearnMoreLinks,
    ReloadInstructions,
} from "react-native/Libraries/NewAppScreen";

import MusicPlay from './qm_comp/MusicPlay'
import Home from './qm_comp/Home'
import MyLike from './qm_comp/MyLike'
import MyTeam from './qm_comp/MyTeam'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { StackNavigator } from 'react-navigation';
// import AllGame from "./AllGame";
// import GameDetail from './GameDetail';
// import Setting from "./Setting";
import Ionicons from 'react-native-vector-icons/Ionicons';
import Global from "./qm_comp/Global";
// import { TouchableHighlight } from "react-native-gesture-handler";

class LoginlTitle extends Component {
    componentDidMount = () => {
        console.log(this.props);
    }
    render() {
        return (
            <View style={{ flexDirection: "row", justifyContent: 'space-between', alignItems: 'center' }}>
                <View style={styles.mus_png}>
                    <Image style={styles.mus_png} source={require('./images/music.png')}></Image>
                </View>
                <Text style={styles.top_text}>北城之音</Text>
                <View style={styles.inp_box}>
                    <TextInput placeholder="搜索"></TextInput>
                </View>
                <TouchableHighlight onPress={this.props.showLB} style={styles.mus_png}>
                    <Image style={styles.mus_png} source={require('./images/list.png')}></Image>
                </TouchableHighlight>
            </View>
        );
    }
}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function MTScreen({ route, navigation }) {
    return (
        <MyTeam navigation={navigation} route={route}></MyTeam>
    );
}
function MPScreen({ route, navigation }) {
    return (
        <MusicPlay navigation={navigation} route={route}></MusicPlay>
    );
}
function MLScreen({ route, navigation }) {
    return (
        <MyLike navigation={navigation} route={route}></MyLike>
    );
}
function HomeScreen({ route, navigation }) {
    return (
        <Home navigation={navigation} route={route}></Home>
    );
}

function HomeTabs() {
    return (

        <Tab.Navigator

            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;

                    if (route.name === 'Home') {
                        iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
                    } else if (route.name === 'MusicPlay') {
                        iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
                    } else if (route.name === 'MyLike') {
                        iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
                    } else if (route.name === 'MyTeam') {
                        iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
                    }

                    // You can return any component that you like here!
                    return <Ionicons name={iconName} size={26} color={color} />;
                },
            })}
            tabBarOptions={
                {
                    showIcon: true,
                    activeTintColor: 'tomato',
                    inactiveTintColor: 'gray',
                }
            }
        >
            <Tab.Screen name="Home" options={{ title: '首页', headerTitle: props => <LoginlTitle {...props} />, padding: 0 }} component={HomeScreen} />
            <Tab.Screen name="MusicPlay" options={{ title: '播放', headerTitle: props => <LoginlTitle {...props} />, padding: 0 }} component={MPScreen} />
            <Tab.Screen name="MyLike" options={{ title: '收藏', headerTitle: props => <LoginlTitle {...props} />, padding: 0 }} component={MLScreen} />
            <Tab.Screen name="MyTeam" options={{ title: '团队', headerTitle: props => <LoginlTitle {...props} />, padding: 0 }} component={MTScreen} />
        </Tab.Navigator>
    );
}
class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isOpen: false,
            userInfoBox: false,
            userInfo: [],
            pw: null,
            uid: null,
            isLogin: false
        }
    }
    _openLogin = () => {
        this.setState({ isLogin: true })
    }
    _hideLB = () => {
        this.setState({ isOpen: false })
    }
    _showLB = () => {
        this.setState({ isOpen: true })
    }
    _showUserInfo = () => {
        if (Global.userInfo==undefined) {
            ToastAndroid.show('请先登录！',2)
        }else{
            var userInfo = Global.UInfo
            console.log(userInfo);
            this.setState({ userInfo: userInfo })
            this.setState({ userInfoBox: true })
        }
    }
    _closeInfo = () => {
        this.setState({ userInfoBox: false })
    }
    _closeLogin = () => {
        this.setState({
            isLogin: false
        })
    }
    _login = () => {
        var uid = this.state.uid
        var pw = this.state.pw
        var that = this
        if (uid != null && pw != null) {
            fetch('https://www.annjong.com/bcumusic/api/user/login?password=' + this.state.pw + '&userId=' + this.state.uid,
                {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                },
            )
                .then(res => res.json())
                .then(res => {
                    console.log(res);
                    if (res.msg=='操作成功') {
                        Global.UInfo = res.obj
                        that.setState({
                            uid:null,
                            pw:null,
                            isLogin:false
                        })
                        ToastAndroid.show('登陆成功！',2)
                    }else{
                        ToastAndroid.show('用户名/密码错误！',2)
                    }
                })
        } else {
            ToastAndroid.show('请输入完整信息！', 2)
        }
    }
    render() {
        return (
            <NavigationContainer>
                <Modal visible={this.state.isOpen} transparent={true}>
                    <View style={styles._Modal}>
                        <View style={styles.left_bar}>
                            <View style={styles.top_c}>
                                <View style={styles.c_item1}>
                                    <Text style={{ fontSize: 20 }}>用户中心</Text>
                                </View>
                                <TouchableHighlight onPress={this._openLogin} style={styles.c_item}>
                                    <Text>登录</Text>
                                </TouchableHighlight>
                                <TouchableHighlight onPress={this._showUserInfo} style={styles.c_item}>
                                    <Text>用户信息</Text>
                                </TouchableHighlight>
                            </View>
                            <View style={styles.btn_c}>
                                <TouchableHighlight onPress={this._hideLB} style={styles.c_item}>
                                    <Text>取消</Text>
                                </TouchableHighlight>
                            </View>
                        </View>
                    </View>
                </Modal>
                <Modal visible={this.state.userInfoBox} transparent={true}>
                    <View style={styles._Modal}>
                        <View style={styles.userInfo_box}>
                            <View style={styles._Modal_top}>
                                <View>
                                    <Text style={{ fontSize: 20 }}>用户信息</Text>
                                </View>
                            </View>
                            <View style={styles._Modal_con}>
                                <View style={styles.line_info}>
                                    <Text>用户id：</Text>
                                    <Text>{this.state.userInfo.userId}</Text>
                                </View>
                                <View style={styles.line_info}>
                                    <Text>密码：</Text>
                                    <Text>{this.state.userInfo.password}</Text>
                                </View>
                                <View style={styles.line_info}>
                                    <Text>姓名：</Text>
                                    <Text>{this.state.userInfo.username}</Text>
                                </View>
                                <View style={styles.line_info}>
                                    <Text>毕业学校：</Text>
                                    <Text>北京城市学院</Text>
                                </View>
                                <View style={styles.line_info}>
                                    <Text>班级：</Text>
                                    <Text>18软本2</Text>
                                </View>
                            </View>
                            <TouchableHighlight style={styles._Modal_bot} onPress={this._closeInfo}>
                                <Text>关闭</Text>
                            </TouchableHighlight>

                        </View>
                    </View>
                </Modal>
                <Modal visible={this.state.isLogin} transparent={true}>
                    <View style={styles._Modal}>
                        <View style={styles.userInfo_box}>
                            <View style={styles._Modal_top}>
                                <View>
                                    <Text style={{ fontSize: 20 }}>用户登录</Text>
                                </View>
                            </View>
                            <View style={styles._Modal_con}>
                                <TextInput
                                    style={styles.inputFormTextInput}
                                    onChangeText={text =>
                                        this.setState({
                                            uid: text,
                                        })
                                    }
                                    placeholder={'请输入用户名'}
                                    value={this.state.uid}
                                />
                                <TextInput
                                    style={styles.inputFormTextInput}
                                    onChangeText={text =>
                                        this.setState({
                                            pw: text,
                                        })
                                    }
                                    placeholder={'请输入密码'}
                                    value={this.state.pw}
                                />
                            </View>
                            <View style={styles.log_bot}>
                                <TouchableHighlight style={styles.log_btn_box} onPress={this._closeLogin}>
                                    <Text style={{ fontSize: 20, color: 'red' }}>关闭</Text>
                                </TouchableHighlight>
                                <TouchableHighlight style={styles.log_btn_box} onPress={this._login}>
                                    <Text style={{ fontSize: 20, color: 'green' }}>登录</Text>
                                </TouchableHighlight>
                            </View>
                        </View>
                    </View>
                </Modal>
                <Stack.Navigator>
                    <Stack.Screen name="MusHome" options={{ headerTitle: props => <LoginlTitle {...props} showLB={this._showLB} />, padding: 0 }} component={HomeTabs} />
                    {/* <Stack.Screen name="MusicPlay" options={{ headerTitle: props => <LoginlTitle {...props} />, padding: 0 }} component={MPScreen} /> */}
                    {/* <Stack.Screen name="GameDetail" options={{ headerTitle: props => <DetailTitle {...props} />, padding: 0 }} component={GameDetailScreen} />
                    <Stack.Screen name="Reg" options={{ headerTitle: props => <RegTitle {...props} />, padding: 0 }} component={RegScreen} /> */}
                </Stack.Navigator>
            </NavigationContainer>
        );
    }
}

const styles = StyleSheet.create({
    inputFormTextInput: {
        height: 40,
        width: '80%',
        marginLeft: '10%',
        borderColor: 'gray',
        borderBottomWidth: 1,
      },
    log_btn_box: {
        width: '50%',
        height: '100%',
        // backgroundColor:'blue',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    line_info: {
        width: '90%',
        height: 20,
        alignSelf: 'center',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginTop: 18
    },
    _Modal_top: {
        width: '100%',
        height: '10%',
        // backgroundColor:'red',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },
    _Modal_con: {
        width: '100%',
        height: '70%',
        backgroundColor: 'yellow',
        display: 'flex',
        // alignItems:'center'
    },
    log_bot: {
        width: '100%',
        height: '20%',
        // backgroundColor:'blue',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    _Modal_bot: {
        width: '100%',
        height: '20%',
        // backgroundColor:'blue',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center'
    },
    userInfo_box: {
        width: '80%',
        height: 300,
        backgroundColor: 'white',
        alignSelf: 'center',
        marginTop: 100,
        borderRadius: 10,
        overflow: 'hidden'
    },
    btn_c: {
        width: '100%',
        height: 45,
        // backgroundColor:'red',

    },
    top_c: {
        width: '100%',
        height: 200,
        // backgroundColor:'red'
    },
    c_item1: {
        width: '100%',
        height: 40,
        backgroundColor: '#9a9a9a',
        alignItems: 'center',
        justifyContent: 'center',
    },
    c_item: {
        width: '100%',
        height: 40,
        backgroundColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 5
    },
    left_bar: {
        width: 200,
        height: '100%',
        backgroundColor: 'white',
        display: 'flex',
        justifyContent: 'space-between'
    },
    _Modal: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        flex: 1
    },
    inp_box: {
        height: 35,
        width: 160,
        backgroundColor: 'rgb(212, 212, 212)',
    },
    mus_png: {
        width: 45,
        height: 45,
    },
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    },
    topBar: {
        backgroundColor: "white",
        width: Dimensions.get("window").width,
        height: 60,
        // left: -16,
        flexDirection: "row",
        margin: 0
    },
    line_title: {
        fontSize: 40,
        color: "black",
        flex: 2
    },
    line_date: {
        fontSize: 10,
        color: "#666",
        flex: 1
    },
    top_text: {
        fontSize: 20,
        color: "black",
        // textAlign: "center",
        // flex: 1,
        textAlignVertical: "center",
    },
    top_image: {
        resizeMode: "contain",
    },
    bottom_btn: {
        flex: 1,
    },
    highlight: {
        fontWeight: "700",
    }
});



export default App;

